<template>
	<view class="container">
		<view class="search">
			<uv-search placeholder="请输入搜索型号" v-model="model" :showAction="false" shape="square" bgColor="#fff"
				@search="search"></uv-search>
			<view class="search-param">
				<view class="search-param-item">
					<uv-input v-model="innerDiameter" placeholder="内径" shape="square" border="surround"
						:clearable="true" :customStyle="inputStyle" placeholderStyle="font-size: 24rpx;color: #909399;"
						fontSize="12" @confirm="search"></uv-input>
				</view>
				<view class="search-param-item">
					<uv-input v-model="outerDiameter" placeholder="外径" shape="square" border="surround"
						:clearable="true" :customStyle="inputStyle" placeholderStyle="font-size: 24rpx;color: #909399;"
						fontSize="12" @confirm="search"></uv-input>
				</view>
				<view class="search-param-item">
					<uv-input v-model="width" placeholder="宽度" shape="square" border="surround" :clearable="true"
						:customStyle="inputStyle" placeholderStyle="font-size: 24rpx;color: #909399;" fontSize="12"
						@confirm="search"></uv-input>
				</view>
			</view>
		</view>
		<uv-empty v-if="dataList.length == 0" mode="data" text="请输入搜索关键字" marginTop="100"></uv-empty>
		<view class="products">
			<view v-for="(item, index) in dataList" :key="item.id">
				<view class="product">
					<view class="product-image">
						<uv-image shape="circle" :src="item.image" width="140rpx" height="140rpx"></uv-image>
					</view>
					<view class="product-info">
						<view class="product-model">
							<text>型号: {{item.model}}</text>
						</view>
						<view class="product-brand">
							<text>品牌: {{item.brand_name}}</text>
						</view>
						<view class="product-param">
							<text v-for="(value, key) in item.details" :key="key">
								{{ key }}: {{ value }}
							</text>
						</view>
					</view>
				</view>
				<uv-line></uv-line>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				model: '',
				innerDiameter: '',
				outerDiameter: '',
				width: '',
				inputStyle: {
					"background": "#FFFFFF"
				},

				dataList: [],
				reload: false, //判断是否上拉
				total: 0, //数据量
				current_page: 1, //当前页码
				last_page: 1, //总页码
				status: 'more',
				contentText: {
					contentdown: ' ',
					contentrefresh: '加载中',
					contentnomore: ''
				}
			};
		},
		onLoad() {

		},
		onPullDownRefresh() {
			this.current_page = 1;
			this.reload = true;
			this.loadData();
		},
		onReachBottom() {
			//判断是否最后一页
			if (this.current_page >= this.last_page) {
				this.status = 'noMore';
			} else {
				this.reload = false;
				this.current_page = this.current_page + 1; //页码+1
				this.status = 'loading';
				this.loadData();
			}
		},
		methods: {
			search() {
				this.loadData('search');
			},
			async loadData(type) {
				uni.showLoading({
					title: '加载中'
				});
				await uni.request({
					url: '/wanlshop.user/searchSpec',
					method: 'POST',
					data: {
						page: this.current_page,
						model: this.model,
						inner_diameter: this.innerDiameter,
						outer_diameter: this.outerDiameter,
						width: this.width,
					},
					success: res => {
						uni.stopPullDownRefresh();
						this.dataList = type === 'search' ?
							res.data.data :
							this.reload ?
							res.data.data :
							this.dataList.concat(res.data.data);
						this.total = res.data.total; //数据量
						this.current_page = res.data.current_page; //当前页码
						this.last_page = res.data.last_page; //总页码
						this.status = res.data.total == 0 ? 'noMore' : 'more';
						uni.hideLoading();
					}
				});
			}
		}
	}
</script>

<style>
	page {
		background: #FFFFFF;
	}

	.uv-input {
		padding-top: 4px !important;
		padding-bottom: 4px !important;
		padding-left: 4px !important;
		padding-right: 4px !important;
	}

	.uv-border {
		border-width: 0rpx !important;
		border-color: #FFFFFF !important;
		border-style: none !important;
	}
</style>

<style lang="scss">
	.search {
		background: #fe5400;
		padding: 30rpx 20rpx;

		.search-param {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 10rpx;

			.search-param-item {
				width: 32%;
			}
		}
	}

	.product {
		padding: 40rpx 20rpx 20rpx;
		display: flex;

		.product-image {
			image {
				width: 130rpx;
				height: 130rpx;
			}
		}

		.product-info {
			width: 90%;
			margin-left: 20rpx;

			.product-model {
				text {
					font-weight: bold;
				}
			}

			.product-brand {
				color: #636363;
				font-size: 24rpx;
				padding: 20rpx 0rpx;
			}

			.product-param {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				justify-content: space-between;
				color: #636363;
				font-size: 24rpx;

				text {
					padding: 0rpx 20rpx 20rpx 0rpx;
				}
			}
		}

	}
</style>